<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="input-group flex-nowrap">
        <div class="input-group-prepend">
            <span class="input-group-text" id="addon-wrapping">已知字符</span>
        </div>
        <input id="letters" type="text" class="form-control" placeholder="word">
    </div>
    <div class="input-group flex-nowrap">
        <div class="input-group-prepend">
            <span class="input-group-text">排除字符</span>
        </div>
        <input id="nots" type="text" class="form-control" placeholder="word">
    </div>
    <div class="input-group flex-nowrap">
        <div class="input-group-prepend">
            <span class="input-group-text">字符个数（不含空格）</span>
        </div>
        <input id="count" type="text" class="form-control" placeholder="word">
    </div>
    <button id="btn" type="button" class="btn btn-primary">hangman</button>
    <div class="text-primary">
        单词出现次数;
    </div>
    <div id="percent">

    </div>
    <div>备选：</div>
    <div id="result-zone">

    </div>
</div>

<script>

    var words = ['elf', 'eve', 'fir', 'ham', 'icy', 'ivy', 'joy', 'pie', 'toy', '', '', 'gift', 'gold', 'list', 'love', 'nice', 'sled', 'star', 'wish', 'wrap', 'xmas', 'yule', 'card', 'hope', 'noel', 'give', 'tree', 'coal', 'snow', '', 'angel', 'bells', 'cider', 'elves', 'goose', 'holly', 'jesus', 'merry', 'myrrh', 'party', 'skate', 'visit', 'jolly', 'scarf', 'candy', 'snowy', 'socks', 'kings', 'bonus', 'happy', '', 'candle', 'creche', 'cookie', 'eggnog', 'eulogy', 'family', 'frosty', 'icicle', 'joyful', 'manger', 'season', 'spirit', 'tinsel', 'turkey', 'unwrap', 'wonder', 'winter', 'wreath', 'sleigh', 'parade', 'carols', 'lights', '', 'charity', 'chimney', 'festive', 'holiday', 'krampus', 'mittens', 'naughty', 'package', 'pageant', 'rejoice', 'rudolph', 'scrooge', 'snowman', 'sweater', 'tidings', 'wassail', '', '', 'firewood', 'nativity', 'reindeer', 'shopping', 'snowball', 'stocking', 'toboggan', 'trimming', 'vacation', 'wise men', 'workshop', 'yuletide', 'yule log', 'blizzard', 'goodwill', 'presents', 'pinecone', '', 'chestnuts', 'christmas', 'fruitcake', 'greetings', 'mince pie', 'mistletoe', 'ornaments', 'snowflake', 'tradition', 'partridge', 'fireplace', 'sugarplum', '', '', 'candy cane', 'decoration', 'ice skates', 'jack frost', 'north pole', 'nutcracker', 'saint nick'];

    $('#btn').click(function () {
        hangman();
    })
    showResult(words);
    percent(words)
    function hangman() {
        var result = words;
        var count = parseInt($('#count').val())
        if (count) {
            // 先按字符筛选
            result = result.filter(function (item) {
                return item.replace(/\s/g, '').length === count
            })
        }
        // 然后判断包含的
        var array = $('#letters').val();
        if(array){
            array = array.toLowerCase();
            var length = array.length
            var patt = ''
            for (var i = 0; i < length; i++) {
                var letter = array[i]
                patt += '(?=.*' + letter + ')'
            }
            patt += ''
            var reg = new RegExp(patt);
            //正则筛选
            result = result.filter(function (item) {
                return item.search(reg) >= 0;
            })
            console.log(result);
        }

        // 不包含
        // 然后判断包含的
        var notsArray = $('#nots').val();
        if(notsArray){
            notsArray = notsArray.toLowerCase()
            var notPatt = ''
            for (var i = 0; i < notsArray.length; i++) {
                var letter = notsArray[i]
                notPatt += '(?=.*' + letter + ')'
            }
            //正则筛选
            result = result.filter(function (item) {
                return item.search(new RegExp(notPatt)) < 0;
            })
            console.log(result);
        }

        showResult(result)
        percent(result)
    }

    function showResult(array) {
        $('#result-zone').html('');
        array.forEach(function (item) {
            $('#result-zone').append('<div>' + item + '</div>')
        })
    }

    /**
     * 展示概率
     */
    function percent(result) {
        // 先把结果串起来
        var all = result.join('');
        var obj = {};
        for (var i = 0; i < all.length; i++) {
            var key = all[i];
            if (obj[key]) {
                obj[key]++;
            } else {
                obj[key] = 1;
            }
        }
        console.log(obj);
        // 编程数组
        var showStrArray = []
        // 展示
        for(let key in obj) {
            if(obj.hasOwnProperty(key)) {
                showStrArray.push({
                    key:key,
                    count: obj[key]
                })
            }
        }
        // 排除已选字母
        var letters = $('#letters').val()
        if(letters){
            showStrArray = showStrArray.filter(function (item){
                return  letters.indexOf(item.key)<0
            })
        }

        // 排序
        showStrArray.sort(function(a,b){
            return b.count - a.count
        })
        $('#percent').html('')
        showStrArray.forEach(function(item){
            $('#percent').append('<span class="ml-3">'+item.key+':'+item.count+'</span>')
        })
        return obj;
    }
</script>

</body>
</html>